<template>
    <view style="height: 100%">
        <!-- homeSub/pages/discount/cardCoupons/cardCoupons.wxml -->
        <view class="card_wrap">
            <view class="card_list">
                <view class="card_item">
                    <image
                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/tags.png"
                        class="card_tags"
                        v-if="cardCoupon.userCoupon.expireStatus"
                    ></image>
                    <image
                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/tags_new.png"
                        class="card_tags"
                        v-if="cardCoupon.userCoupon.newStatus"
                    ></image>
                    <!-- <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/line_bg.png" class="card_bg" wx:if="{{cardCoupon.userCoupon.applyStationType == 1}}"></image>
            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/line-yellow_bg.png" class="card_bg" wx:else></image>      -->

                    <image
                        :src="cardCoupon.userCoupon.picture ? cardCoupon.userCoupon.picture : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/line_bg.png'"
                        class="card_bg"
                        v-if="cardCoupon.userCoupon.applyStationType == 1"
                    ></image>
                    <image
                        :src="
                            cardCoupon.userCoupon.picture
                                ? cardCoupon.userCoupon.picture
                                : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/line-yellow_bg.png'
                        "
                        class="card_bg"
                        v-if="cardCoupon.userCoupon.applyStationType == 2 || cardCoupon.userCoupon.applyStationType == 3"
                    ></image>

                    <view class="card_content">
                        <view class="card_money">
                            <view class="card_money_num">
                                ￥
                                <text>{{ cardCoupon.userCoupon.couponAmount }}</text>
                            </view>
                            <view class="card_money_des" v-if="cardCoupon.userCoupon.applyStationType == 1">通用券</view>
                            <view class="card_money_des" v-if="cardCoupon.userCoupon.applyStationType == 2">站点专属</view>
                            <view class="card_money_des" v-if="cardCoupon.userCoupon.applyStationType == 3">指定条件</view>
                        </view>
                        <view class="card_riqi">
                            <view class="card_riqi_title" v-if="cardCoupon.userCoupon.type == 1">服务费券</view>
                            <view class="card_riqi_title" v-if="cardCoupon.userCoupon.type == 2">电费券</view>
                            <view class="card_riqi_title" v-if="cardCoupon.userCoupon.type == 3">现金券</view>
                            <view class="card_riqi_des">满{{ cardCoupon.userCoupon.meetAmount }}可用</view>
                            <view class="card_riqi_riqi">
                                <view>
                                    <image class="card_riqi_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon1.png"></image>
                                    {{ cardCoupon.userCoupon.receiveTime }}
                                </view>
                                <view>
                                    <image class="card_riqi_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon2.png"></image>
                                    {{ cardCoupon.userCoupon.expireTime }}
                                </view>
                            </view>
                        </view>
                        <!-- <view class="card_xd" bindtap="toCardCoupons">
                    限部分站点
                    <image class="card_xd_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/turn.png"></image>
                </view> -->
                    </view>
                </view>
            </view>
        </view>

        <view class="cardCoupon_explain">
            <view class="explain_item">
                <view class="explain_icon">
                    <image class="card_xd_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon_source.png"></image>
                </view>
                <view class="explain_title">
                    <text>来源</text>
                </view>
                <view class="explain_des">
                    <text v-if="cardCoupon.userCoupon.receiveMode == 1">
                        <text v-if="cardCoupon.userCoupon.activityType == 1">充值奖励活动</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 2">累计消费活动</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 3">单笔折扣活动</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 4">站点优惠活动</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 5">邀请奖励</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 6">新客有礼</text>
                        <text v-if="cardCoupon.userCoupon.activityType == 7">多人拼团</text>
                    </text>

                    <text v-if="cardCoupon.userCoupon.receiveMode == 2">成长等级会员</text>
                    <text v-if="cardCoupon.userCoupon.receiveMode == 3">付费会员</text>
                    <text v-if="cardCoupon.userCoupon.receiveMode == 4">推广</text>
                </view>
            </view>

            <view class="explain_item">
                <view class="explain_icon">
                    <image class="card_xd_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon_site.png"></image>
                </view>
                <view class="explain_title">
                    <text>适用站点</text>
                </view>
                <view class="explain_des">
                    {{ cardCoupon.applyStation }}
                </view>
            </view>

            <view class="explain_item">
                <view class="explain_icon">
                    <image class="card_xd_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon_instructions.png"></image>
                </view>
                <view class="explain_title">使用说明</view>
                <view class="explain_des">
                    <rich-text :nodes="cardCoupon.couponExplain"></rich-text>
                    <rich-text v-if="!cardCoupon.couponExplain" nodes="xxx"></rich-text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// homeSub/pages/discount/cardCoupons/cardCoupons.ts
import { getPageCouponDetail } from '../../../../api/marketing/coupon';
export default {
    data() {
        return {
            cardCouponList: {},

            cardCoupon: {
                userCoupon: {
                    expireStatus: '',
                    newStatus: '',
                    picture: false,
                    applyStationType: 0,
                    couponAmount: '',
                    type: 0,
                    meetAmount: '',
                    receiveMode: 0,
                    activityType: 0
                },

                applyStation: '',
                couponExplain: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options: any) {
        this.getPageCouponDetail(options.id);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        async getPageCouponDetail(id: string | number) {
            try {
                const res = await getPageCouponDetail({
                    id
                });
                const cardCoupon = res.data || {};
                cardCoupon.userCoupon = cardCoupon.userCoupon || {};
                console.log(cardCoupon, '优惠券详情啊..........');
                this.setData({
                    cardCoupon: res.data
                });
            } catch (error) {}
        }
    }
};
</script>
<style lang="less" scoped>
/* homeSub/pages/discount/cardCoupons/cardCoupons.wxss */
@import '../../../../commin/flex.less';

page {
    background: #f5f7fa;
    padding: 0 24rpx;
    box-sizing: border-box;
}

/* 可用卡券*/
.card_wrap {
    .card_list {
        margin: 20rpx 0;
        .card_item {
            width: 100%;
            height: 223rpx;
            position: relative;
            margin-bottom: 16rpx;
            .card_tags {
                position: absolute;
                top: 0;
                left: 0;
                width: 78rpx;
                height: 33rpx;
                z-index: 5;
            }
            .card_bg {
                position: absolute;
                width: 100%;
                height: 223rpx;
            }
            .card_content {
                position: absolute;
                z-index: 1;
                display: flex;
                height: 100%;
                .card_money {
                    width: 220rpx;
                    text-align: center;
                    padding: 65rpx 0;
                    /*    background: yellow;*/
                    .card_money_num {
                        font-size: 26rpx;
                        font-family: PingFang;
                        font-weight: bold;
                        color: #ffffff;
                        > text {
                            font-size: 46rpx;
                        }
                    }
                    .card_money_des {
                        margin-top: 10rpx;
                        font-size: 26rpx;
                        font-family: PingFang;
                        font-weight: 500;
                        color: #ffffff;
                    }
                }
                .card_riqi {
                    width: 290rpx;
                    padding: 32rpx 0;
                    padding-left: 32rpx;
                    /*    background: pink;*/
                    .card_riqi_title {
                        font-size: 34rpx;
                        font-family: PingFang;
                        font-weight: bold;
                        color: #303133;
                    }
                    .card_riqi_des {
                        margin: 15rpx 0;
                        font-size: 26rpx;
                        font-family: PingFang;
                        font-weight: 500;
                        color: #606266;
                    }
                    .card_riqi_riqi {
                        line-height: 36rpx;
                        > view {
                            font-size: 24rpx;
                            font-family: PingFang;
                            font-weight: 500;
                            color: #909399;
                            .card_riqi_icon {
                                width: 18rpx;
                                height: 18rpx;
                            }
                        }
                    }
                }
                .card_xd {
                    padding: 36rpx 0;
                    font-size: 24rpx;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #909399;
                    .card_xd_icon {
                        width: 12rpx;
                        height: 21rpx;
                    }
                }
            }
        }
    }
}

.cardCoupon_explain {
    width: 100%;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    padding: 0 32rpx;
    padding-top: 40rpx;
    box-sizing: border-box;
    .explain_item {
        margin-bottom: 40rpx;
        display: flex;
        .explain_icon {
            width: 30rpx;
            margin-right: 12rpx;
            image {
                width: 28rpx;
                height: 28rpx;
                /* vertical-align: middle;*/
            }
        }
        .explain_title {
            width: 110rpx;
            line-height: 42rpx;
            margin-right: 40rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #606266;
            white-space: nowrap;
        }
        .explain_des {
            width: 445rpx;
            line-height: 42rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #303133;
        }
    }
}
</style>
